<!--
 * @Description: 日志管理
 * @Author: linjz
 * @Date: 2021-06-25 10:25:00
 * @LastEditors: linjz
 * @LastEditTime: 2021-06-28 17:24:22
-->
<template>
  <div>
    <!-- 表格 -->
    <div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号" width="80" align="center">
        </el-table-column>
        <el-table-column prop="realname" label="访问人真实姓名" align="center">
        </el-table-column>
        <el-table-column prop="method" label="访问方式" align="center">
        </el-table-column>
        <el-table-column prop="content" label="访问路径" align="center">
        </el-table-column>
        <el-table-column prop="logTime" label="访问时间" align="center">
          <template slot-scope="scope">
            {{ moment(scope.row.logTime).format("yyyy-MM-DD HH:mm:ss") }}
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页  -->
    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.page"
        :page-sizes="[2, 5, 10, 15, 20]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import { pageQuery } from "@/api/log";

export default {
  data() {
    return {
      params: {
        page: 1,
        pageSize: 10,
      },
      // 表格数据
      tableData: {},
      // 条数
      total: "",
    };
  },
  computed: {},
  watch: {
    params: {
      handler() {
        this.queryLogData();
      },
      deep: true,
    },
  },
  methods: {
    // 时间格式化
    moment,
    // 每页显示条数发生变化时
    handleSizeChange(val) {
      this.params = {
        page: 1,
        pageSize: val,
      };
    },
    // 页数发生变化时
    handleCurrentChange(val) {
      this.params.page = val;
    },
    // 获取日志信息
    async queryLogData() {
      let res = await pageQuery(this.params);
      // console.log(res);
      this.tableData = res.data.list;
      this.total = res.data.total;
    },
  },
  created() {
    this.queryLogData();
  },
  mounted() {},
};
</script>
<style scoped>
.page {
  float: right;
  margin-top: 10px;
}
</style>